<template>
  <div>
    <app-header></app-header>
    <div class="onebet-breadcrumb">
      <span @click="handleBack">首页<i class="iconfont">&#xe630;</i></span>
      <span>公告列表</span>
    </div>
    <div id="notice">
      <div class="notice-title">平台公告</div>
      <div class="notice-box">
        <ul class="notice-list">
          <li v-if="noticeList&&noticeList.value.length>0" v-for="(list,index) in noticeList.value" :key="index"
              @click="handleDetails(list.id)">
            <span v-if="list.title" class="notice-list-title" v-html="list.title"></span>
            <span class="notice-list-time">{{list.date}}</span>
          </li>
          <li v-if="!noticeList||noticeList.value.length<1"><p class="none-data">暂无数据</p></li>
        </ul>
        <div class="notice-page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="noticeList.pageNum"
            :page-size="noticeList.pageSize"
            :total="noticeList.totalCount"
            layout="prev, pager, next"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import header from '@/components/header/header'
  import Api from '@/axios/api/api'

  export default {
    name: 'notice',
    data() {
      return {
        noticeList: {
          totalCount: null, // 总条数
          pageNum: 1, // 当前显示页号
          pageSize: 10, // 每页显示数据条数
          value: []
        }
      }
    },
    components: {
      'app-header': header
    },
    methods: {
      getNoticeData() {
        let param = {
          pageNum: this.noticeList.pageNum,
          pageSize: this.noticeList.pageSize
        }
        Api.platformNotice(param).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.noticeList.value = result.data.data
            this.noticeList.totalCount = result.data.totalCount
          } else {
            this.$message.error(result.message)
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(pageNumber) {
        this.noticeList.pageNum = pageNumber
        this.getNoticeData()
      },
      handleDetails(index) {
        this.$router.push({
          path: '/noticeDetails',
          query: {
            id: index
          }
        })
      },
      handleBack() {
        this.$router.push({
          path: '/'
        })
      }
    },
    mounted() {
      this.getNoticeData()
    }
  }
</script>

<style lang="less" scoped>
  #notice {
    width: 1200px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 78px;
    padding-top: 10px;
    .notice-title {
      width: 100%;
      height: 56px;
      line-height: 56px;
      display: block;
      overflow: hidden;
      text-align: left;
      background: #7B52F8;
      font-size: 18px;
      color: #FFFFFF;
      text-indent: 24px;
    }
    .notice-box {
      position: relative;
      width: 100%;
      height: auto;
      display: block;
      padding: 0 38px;
      padding-bottom: 60px;
      box-sizing: border-box;
      box-shadow: 2px 2px 10px 0 rgba(219, 217, 223, 0.50);
      .notice-page {
        position: absolute;
        left: 0;
        bottom: 10px;
        width: 100%;
        height: 40px;
        display: block;
        overflow: hidden;
        text-align: right;
      }
      .notice-list {
        width: 100%;
        height: auto;
        display: block;
        padding-bottom: 40px;
        display: block;
        overflow: hidden;
        > li {
          width: 100%;
          height: 56px;
          line-height: 56px;
          border-bottom: 1px solid #D8D8D8;
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #000000;
          display: block;
          overflow: hidden;
          margin-top: 10px;
          &:hover {
            cursor: pointer;
            .notice-list-title {
              color: #7B52F8;
            }
          }
          > span {
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .notice-list-title {
            text-align: left;
            width: 85%;
          }
          .notice-list-time {
            text-align: right;
            width: 15%;
          }
        }
      }
    }
  }
</style>
